<template>
    <div style="margin: -24px;">
        <div style="height: calc(100vh - 100px);width: 100%" id="mapbox"></div>
        <div class="selectbox">
            <div class="item-online">
                <div style="display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;">
                    <span style="color: #11EEE1;font-size: 16px;padding-right: 20px;font-weight: 600;">在线设备</span>
                    <span style="color: #fff;font-size: 30px;font-weight: 600;">4</span>
                </div>
            </div>
            <div class="item-offline">
                <div style="display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;">
                    <span style="color: #e74032;font-size: 16px;padding-right: 20px;font-weight: 600;">离线设备</span>
                    <span style="color: #e74032;font-size: 30px;font-weight: 600;">3</span>
                </div>
            </div>
        </div>
        <div class="settingOption">
            <div class="set">
                <div class="set-item">
                    <MonitorOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                </div>
                <div class="set-item">
                    <PlusSquareOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                </div>
            </div>
            <div class="searchbox">
                <a-input-search v-model:value="searchValue" placeholder="请输入设备" style="width: 200px" @search="onSearch" />
            </div>
        </div>
        <div class="leftBox">
            <div class="row">
                <div class="topbox">
                    <div>
                        <span class="title">压力</span>
                        <span>西安测试.唐沣国际.B座.设备1</span>
                    </div>
                    <div>
                        <AlignCenterOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                    </div>
                </div>
                <div ref="chartPress" :style="{ width: '100%', height: '100%' }"></div>
            </div>
            <div class="row">
                <div class="topbox">
                    <div>
                        <span class="title">温度</span>
                        <span>西安测试.唐沣国际.B座.设备1</span>
                    </div>
                    <div>
                        <AlignCenterOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                    </div>
                </div>
                <div ref="chartTem" :style="{ width: '100%', height: '100%' }"></div>
            </div>
            <div class="row">
                <div class="topbox">
                    <div>
                        <span class="title">流量</span>
                        <span>西安测试.唐沣国际.B座.设备1</span>
                    </div>
                    <div>
                        <AlignCenterOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                    </div>
                </div>
                <div ref="chartFlow" :style="{ width: '100%', height: '100%' }"></div>
            </div>
        </div>
        <div class="rightBox">
            <div class="row">
                <div class="topbox">
                    <div>
                        <span class="title">Alarm</span>
                        <span>西安测试.唐沣国际.B座.设备1</span>
                    </div>
                    <div>
                        <AlignCenterOutlined :style="{ fontSize: '18px', color: '#11EEE1' }" />
                    </div>
                </div>
                <div class="right_center">
                    <div class="right_center_item" v-for="(item, index) in dataSource" :key="Math.random()">
                        <div class="inner_right">
                            <div class="info">
                                <span class="phzhuyao">
                                    {{ item.name }}</span>
                            </div>
                            <div class="info">
                                <span class="phzhuyao">
                                    {{ item.value }}</span>
                            </div>
                            <div class="info">
                                <span class="phzhuyao" :class="item.status === 'Active' ? 'warning' : 'phzhuyao'">
                                    {{ item.status }}</span>
                            </div>
                            <div class="info">
                                <span class="phzhuyao">
                                    {{ item.time }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <div class="row">
                <div class="grid-item">
                    <div ref="chartReal1" :style="{ width: '100%', height: '100%' }"></div>
                </div>
                <div class="grid-item">
                    <div ref="chartReal2" :style="{ width: '100%', height: '100%' }"></div>
                </div>
                <div class="grid-item">
                    <div ref="chartReal3" :style="{ width: '100%', height: '100%' }"></div>
                </div>
                <div class="grid-item">
                    <div ref="chartReal4" :style="{ width: '100%', height: '100%' }"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {
    ref,
    onMounted,
    onBeforeUnmount,
} from 'vue'

const chartPress = ref(null);
const chartTem = ref(null);
const chartFlow = ref(null);
const chartReal1 = ref(null);
const chartReal2 = ref(null);
const chartReal3 = ref(null);
const chartReal4 = ref(null);
const searchValue = ref('');
const message = ref('');
const percent = ref(0);
let timer = null;
// 仪表盘数据
const chartData = ref([
    { value: 0, title: 'High Press' },
    { value: 0, title: 'Low Press' },
    { value: 0, title: 'Temperature' },
    { value: 0, title: 'Flow Rate' }
]);

// 模拟数据更新
const startDataSimulation = () => {
    timer = setInterval(() => {
        // 为每个仪表盘生成独立的随机数
        chartData.value = chartData.value.map(item => ({
            ...item,
            value: Math.floor(Math.random() * 100)
        }));

        // 更新所有图表
        updateAllCharts();
    }, 3000); // 每3秒更新一次数据
};

// 更新所有图表
const updateAllCharts = () => {
    chartData.value.forEach((data, index) => {
        const option = createGaugeOption(data.value, data.title);
        updateChart(index + 1, option);
    });
};

// 创建仪表盘配置
const createGaugeOption = (value, title) => {
    const color = value <= 40 ? 'rgba(12,255,0,1)' :
        value <= 60 ? 'rgba(255,123,0,1)' : 'rgba(255,0,36,1)';
    const colorLight = value <= 40 ? 'rgba(12,255,0,.3)' :
        value <= 60 ? 'rgba(255,123,0,.3)' : 'rgba(255,0,36,.3)';

    return {
        title: {
            "x": '50%',
            "y": '45%',
            textAlign: "center",
            top: '78%',
            'text': title,
            "textStyle": {
                "fontWeight": 'normal',
                "color": '#FFF',
                "fontSize": 12
            },
        },
        series: [
            {
                "name": '',
                "type": 'pie',
                "radius": ['50%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": 225,
                "color": [{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0.4,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: color
                    }, {
                        offset: 1,
                        color: colorLight
                    }],
                    globalCoord: false
                }, 'none'],
                "hoverAnimation": false,
                "legendHoverLink": false,
                "label": {
                    "normal": {
                        "show": false,
                        "position": 'center'
                    },
                    "emphasis": {
                        "show": true,
                        "textStyle": {
                            "fontSize": '30',
                            "fontWeight": 'bold'
                        }
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": false
                    }
                },
                "data": [{
                    "value": 75,
                    "name": '1'
                }, {
                    "value": 25,
                    "name": '2'
                }]
            },
            {
                "name": ' ',
                "type": 'pie',
                "radius": ['48%', '47%'],
                "avoidLabelOverlap": false,
                "startAngle": 225,
                "hoverAnimation": false,
                "legendHoverLink": false,
                "label": {
                    "normal": {
                        "show": false,
                        "position": 'center'
                    },
                    "emphasis": {
                        "show": true,
                        "textStyle": {
                            "fontSize": '30',
                            "fontWeight": 'bold'
                        }
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": false
                    }
                },
                "data": [{
                    "value": 75,
                    "name": '1'
                }, {
                    "value": 25,
                    "name": '2'
                }]
            },
            {
                "name": '',
                "type": 'pie',
                "radius": ['50%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": 315,
                "color": ['rgba(34,34,34,.9)', "#ff7a00", "transparent"],
                "hoverAnimation": false,
                "legendHoverLink": false,
                "clockwise": false,
                "itemStyle": {
                    "normal": {
                        "borderColor": "transparent",
                        "borderWidth": "20"
                    },
                    "emphasis": {
                        "borderColor": "transparent",
                        "borderWidth": "20"
                    }
                },
                "z": 10,
                "label": {
                    "normal": {
                        "show": false,
                        "position": 'center'
                    },
                },
                "labelLine": {
                    "normal": {
                        "show": false
                    }
                },
                "data": [
                    {
                        "value": (100 - value) * 270 / 360,
                        "label": {
                            formatter: value + `\n{unit|${'bar'}}`,
                            position: 'center',
                            show: true,
                            color: '#fff',
                            fontSize: 26,
                            rich: {
                                unit: {
                                    color: '#ffffff',
                                    fontSize: 14,
                                },
                            },
                        },
                        "name": ''
                    },
                    {
                        "value": 1,
                        "name": ''
                    },
                    {
                        "value": 100 - (100 - value) * 270 / 360,
                        "name": ''
                    }
                ]
            },
        ]
    };
};

// 更新指定图表
const updateChart = (chartIndex, option) => {
    const chartRefs = [chartReal1, chartReal2, chartReal3, chartReal4];
    if (chartIndex >= 1 && chartIndex <= 4) {
        const chart = echarts.getInstanceByDom(chartRefs[chartIndex - 1].value);
        if (chart) {
            chart.setOption(option);
        }
    }
};

// 初始化所有图表
const initRealCharts = () => {
    chartData.value.forEach((data, index) => {
        const option = createGaugeOption(data.value, data.title);
        initChartReal(index + 1, option);
    });
};

// 初始化指定图表
const initChartReal = (chartIndex, option) => {
    const chartRefs = [chartReal1, chartReal2, chartReal3, chartReal4];
    if (chartIndex >= 1 && chartIndex <= 4) {
        const chart = echarts.init(chartRefs[chartIndex - 1].value);
        chart.setOption(option || {});
    }
};

// echarts-压力曲线
const initChartPress = () => {
    const chart = echarts.init(chartPress.value);
    const option = {
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        legend: {
            show: true,
            type: "scroll",
            bottom: 40,
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '6%',
            left: '6%',
            right: '2%',
            bottom: '34%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                    fontSize: 10
                },
                formatter: function (data) {
                    return data
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
                '2021.08.01', '2021.08.02', '2021.08.03', '2021.08.04', '2021.08.05', '2021.08.06',
                '2021.08.07', '2021.08.08', '2021.08.09', '2021.08.10', '2021.08.11', '2021.08.12',
                '2021.08.13', '2021.08.14', '2021.08.15', '2021.08.16', '2021.08.17', '2021.08.18',
            ]
        }],
        yAxis: [{
            name: '',
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
        }],
        series: [{
            name: 'High Press',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(33,150,243, 1)",
                }
            },
            itemStyle: {
                color: "rgba(33,150,243, 1)",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25, 40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55]
        }, {
            name: 'Low Press 1',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(76,175,80, 1)",
                }
            },
            itemStyle: {
                color: "rgba(76,175,80, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            data: [40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55, 20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25,]
        }]
    };
    chart.setOption(option);
    chart.resize()
    return chart;
};

// echarts-温度曲线
const initChartTem = () => {
    const chart = echarts.init(chartTem.value);
    const option = {
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        legend: {
            show: true,
            type: "scroll",
            bottom: 40,
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '6%',
            left: '6%',
            right: '2%',
            bottom: '34%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                    fontSize: 10
                },
                formatter: function (data) {
                    return data
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
                '2021.08.01', '2021.08.02', '2021.08.03', '2021.08.04', '2021.08.05', '2021.08.06',
                '2021.08.07', '2021.08.08', '2021.08.09', '2021.08.10', '2021.08.11', '2021.08.12',
                '2021.08.13', '2021.08.14', '2021.08.15', '2021.08.16', '2021.08.17', '2021.08.18',
            ]
        }],
        yAxis: [{
            name: '',
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
        }],
        series: [{
            name: 'Inlet Temp',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(33,150,243, 1)",
                }
            },
            itemStyle: {
                color: "rgba(33,150,243, 1)",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25, 10, 20, 14, 26, 20, 16, 25, 16, 28, 16, 18, 15]
        }, {
            name: 'Suct Temp 1',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(76,175,80, 1)",
                }
            },
            itemStyle: {
                color: "rgba(76,175,80, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            data: [40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55, 40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55]
        }]
    };
    chart.setOption(option);
    chart.resize()
    return chart;
};

// echarts-流量曲线
const initChartFlow = () => {
    const chart = echarts.init(chartFlow.value);
    const option = {
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        legend: {
            show: true,
            type: "scroll",
            bottom: 40,
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '6%',
            left: '6%',
            right: '2%',
            bottom: '34%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                    fontSize: 10
                },
                formatter: function (data) {
                    return data
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
                '2021.08.01', '2021.08.02', '2021.08.03', '2021.08.04', '2021.08.05', '2021.08.06',
                '2021.08.07', '2021.08.08', '2021.08.09', '2021.08.10', '2021.08.11', '2021.08.12',
                '2021.08.13', '2021.08.14', '2021.08.15', '2021.08.16', '2021.08.17', '2021.08.18',
            ]
        }],
        yAxis: [{
            name: '',
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#11EEE1"
                },
            },
            axisLine: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisTick: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#11EEE1',
                    padding: 6,
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
        }],
        series: [{
            name: 'Flow',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#e74032",
                }
            },
            tooltip: {
                show: true
            },
            data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25, 20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25]
        }]
    };
    chart.setOption(option);
    chart.resize()
    return chart;
};


const dataSource = ref([
    {
        key: '1',
        name: '设备1',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '2',
        name: '设备2',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '3',
        name: '设备3',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '4',
        name: '设备4',
        value: 'FC Temp Sensor Alarm',
        status: 'Inactive',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '5',
        name: '设备5',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '6',
        name: '设备6',
        value: 'FC Temp Sensor Alarm',
        status: 'Inactive',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '7',
        name: '设备7',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '8',
        name: '设备8',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '9',
        name: '设备9',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '10',
        name: '设备10',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
    {
        key: '11',
        name: '设备11',
        value: 'FC Temp Sensor Alarm',
        status: 'Active',
        time: "2024-03-11 18:07:13"
    },
]);

const addressInfo = [
    {
        key: '设备1',
        lng: 116.3979471,
        lat: 39.9081726,
        device: "北京客户.工程1.现场1.设备1",
        tem: 23.3,
        hum: 30.3,
        press: 43,
        state: 'online'
    },
    {
        key: '设备2',
        lng: 117.0056,
        lat: 36.6670723,
        device: "济南客户.工程1.现场1.设备2",
        tem: 28.5,
        hum: 30.5,
        press: 43,
        state: 'online'
    },
    {
        key: '设备3',
        lng: 117.2523808,
        lat: 39.1038561,
        device: "天津客户.工程1.现场1.设备3",
        tem: 28.1,
        hum: 26.5,
        press: 43,
        state: 'offline'
    },
    {
        key: '设备4',
        lng: 108.88759,
        lat: 34.223564,
        device: "西安客户.工程1.B座.设备4",
        tem: 32.7,
        hum: 18.5,
        press: 43,
        state: 'online'
    },
    {
        key: '设备5',
        lng: 108.887118,
        lat: 34.223545,
        device: "西安客户.工程2.A座.设备5",
        tem: 32,
        hum: 18,
        press: 43,
        state: 'online'
    },
    {
        key: '设备6',
        lng: 108.887514,
        lat: 34.223354,
        device: "西安客户.工程2.C座.设备6",
        tem: 32,
        hum: 28.5,
        press: 43,
        state: 'offline'
    },
    {
        key: '设备7',
        lng: 114.4897766,
        lat: 38.0451279,
        device: "河北客户.工程1.现场1.设备7",
        tem: 36.9,
        hum: 40.15,
        press: 43,
        state: 'offline'
    },
];

const initMap = () => {
    /*-------------------------------------------------------------天地图---经纬度有误差---------------------------*/
    L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
        code: 'EPSG:4326',
        projection: L.Projection.LonLat,
        transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
        scale: function (zoom) {
            return 256 * Math.pow(2, zoom - 1);
        }
    });
    var map = L.map("mapbox", {
        center: [34.223189, 108.88750000000005],
        zoom: 5,
        maxZoom: 18,
        minZoom: 3,
        attributionControl: false,
        z0omcentrel: true,
        dragging: true,
        closePopupOnClick: false,
    });
    var baseLayers = {
        "高德影像": L.layerGroup(
            [
                L.tileLayer( //底图
                    'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
                    subdomains: "1234",
                }),
                L.tileLayer( //标记
                    'http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=eb254cf5e72992be8b22f9adb1f79093', {
                    subdomains: [1, 2, 3, 4, 5, 6, 7],
                })
            ]).addTo(map),
        "高德底图": L.tileLayer(
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234",
        }),
        "天地图": L.layerGroup(
            [
                L.tileLayer( //底图
                    'http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=eb254cf5e72992be8b22f9adb1f79093', {
                    subdomains: [1, 2, 3, 4, 5, 6, 7],
                }),
                L.tileLayer( //标记
                    'http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=eb254cf5e72992be8b22f9adb1f79093', {
                    subdomains: [1, 2, 3, 4, 5, 6, 7],
                })
            ]),
    }
    L.control.layers(baseLayers, {}).addTo(map);
    /*-------------------------------------------------------------标记------------------------------*/
    var svgIconUrl =
        ''
    var testiconUrl =
        ''
    // 创建一个 L.Icon 实例，使用 SVG 图片作为图标
    var myIcon1 = L.icon({
        iconUrl: svgIconUrl,
        iconSize: [60, 60], // 例如，SVG 图标宽度为 38px，高度为 95px
        iconAnchor: [22, 94], // 例如，定位点在 SVG 图标的中心
        popupAnchor: [-3, -76] // 可选：设置弹出窗口时图标的定位点
    });
    var myIcon2 = L.icon({
        iconUrl: testiconUrl,
        iconSize: [60, 60],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76]
    });
    addressInfo.forEach(function (info) {
        let html = `
        <p style="font-weight: 600;color:#11EEE1">${info.device}</p>
        <p>
          <span style='color:#11EEE1'>压力:</span>
          <span style='color:#fff'>${info.press} Bar</span>
        </p>
        <p>
          <span style='color:#11EEE1'>温度:</span>
          <span style='color:#fff'>${info.tem} ℃</span> 
        </p>
        <p>
          <span style='color:#11EEE1'>湿度:</span>
          <span style='color:#fff'>${info.hum} ℃</span>
        </p>
         <span class="clickable-paragraph" style="border-bottom: 1px solid #fff;color:#fff;cursor: pointer;">查看详情</span>
        `
        // 为每个地点创建一个标记
        var marker = L.marker([info.lat, info.lng], {
            icon: info.state === 'online' ? myIcon1 : myIcon2
        }).bindPopup(html, {
            className: 'my-popup-class'
        }).on('popupopen', function (e) {
            var popup = e.popup;
            // 监听弹窗内的特定段落的点击事件
            popup.getElement().querySelector('.clickable-paragraph')
                .addEventListener(
                    'click',
                    function () {
                        console.log('执行你想要进行的操作---点击弹框详情', info);
                        map.flyTo([info.lat, info.lng], 6, {
                            animate: true, // 确保动画效果开启
                            duration: 2.0, // 动画持续时间，单位秒
                        });
                    });
        });
        marker.on('click', function (event) {
            map.flyTo([info.lat, info.lng], 18, {
                animate: true, // 确保动画效果开启
                duration: 3.0, // 动画持续时间，单位秒
            });
        });
        map.addLayer(marker);
    });
};

onMounted(async () => {
    initMap();
    initChartPress();
    initChartTem();
    initChartFlow();
    initRealCharts(); // 初始化所有实时图表
    startDataSimulation(); // 启动数据模拟
});

onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer); // 清除定时器
        timer = null;
    }
});
</script>

<style scoped>
::v-deep :where(.css-dev-only-do-not-override-19iuou).ant-input {
    background-color: rgba(31, 48, 53, 0.8);
    border-color: #11EEE1;
    color: #11EEE1;
}

::v-deep input::-webkit-input-placeholder {
    color: #676767;
}

::v-deep :where(.css-dev-only-do-not-override-19iuou).ant-btn-default {
    background-color: #2196F3;
    border-color: #11EEE1;
}

::v-deep :where(.css-dev-only-do-not-override-19iuou).ant-btn.ant-btn-icon-only>span {
    color: #fff;
}

.settingOption {
    position: absolute;
    left: 15%;
    top: 50px;
    transform: translate(-50%, -50%);
    z-index: 99999;
    display: flex;
    align-items: center;

    .set {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        .set-item {
            width: 50px;
            height: 40px;
            background: rgba(31, 48, 53, 0.8);
            border-radius: 4px;
            color: #11EEE1;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
    }

    .searchbox {
        background: rgba(31, 48, 53, 0.8);
        border-radius: 4px;
        margin: 8px;
        padding: 4px 8px;
        box-sizing: border-box;
    }
}

.topbox {
    padding: 5px 10px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: normal;
        color: #fff;
        border-bottom: 2px solid #11EEE1;
    }

    span {
        font-size: 12px;
        color: "#E4E4E4";
        display: inline-block;
        margin-left: 8px;
        color: #11EEE1;
    }

    div {
        cursor: pointer;
    }
}

.leftBox {
    position: absolute;
    width: 364px;
    left: 30px;
    top: 108px;
    right: unset;
    bottom: unset;
    z-index: 99999;
}

.leftBox .row {
    width: 364px;
    height: 215px;
    background: rgba(31, 48, 53, 0.8);
    margin: 10px 0;
    border-radius: 6px;
}

.rightBox {
    position: absolute;
    width: 364px;
    right: 30px;
    top: 108px;
    bottom: unset;
    z-index: 99999;

    .row {
        width: 364px;
        height: 665px;
        background: rgba(31, 48, 53, 0.8);
        /* border: 1px solid #11EEE1; */
        margin: 10px 0;
        border-radius: 6px;
    }
}

.bottomBox {
    width: calc(100% - 814px);
    position: absolute;
    bottom: 60px;
    left: 404px;
    transform: translate(0%, 0%);
    z-index: 999;
    box-sizing: border-box;

    .row {
        height: 215px;
        background: rgba(31, 48, 53, 0.8);
        margin: 10px 0;
        border-radius: 6px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 20px 10px;

        .grid-item {
            border-right: 1px solid #11EEE1;
            text-align: center;
        }

        .grid-item:last-child {
            border-right: none;
        }
    }
}

.selectbox {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    box-sizing: border-box;
    display: flex;
}

.item-online {
    border-radius: 5px;
    /* background-color: rgba(0, 0, 0, .5); */
    background: rgba(31, 48, 53, 0.5);
    border: 1px solid rgba(31, 48, 53, 0.8);
    margin: 8px;
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.item-offline {
    border-radius: 5px;
    /* background-color: rgba(0, 0, 0, .5); */
    background: rgba(198, 82, 50, 0.5);
    border: 1px solid rgba(198, 82, 50, 0.8);
    margin: 8px;
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

::v-deep .leaflet-popup-content-wrapper {
    background: rgba(31, 48, 53, 0.8);
}

::v-deep .leaflet-popup-tip {
    background: rgba(31, 48, 53, 0.8);
}

.ant-table-tbody>tr>td {
    padding: 10px 2px !important;
    overflow: hidden;
    text-overflow: -webkit-line-clamp(2);
    -webkit-line-clamp: 2;
    word-break: break-word;
}


.right_center {
    width: 100%;
    height: 665px;
    padding: 0 10px;

    .right_center_item {
        height: auto;
        padding: 5px 10px;
        font-size: 14px;
        border-bottom: 1px solid #676767;

        .inner_right {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            line-height: 1.5;
        }

        .info {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25%;

            .labels {
                flex-shrink: 0;
                font-size: 14px;
            }

            .phlabels {
                font-size: 12px;
                color: var(--fontColor);
            }

            .phzhuyao {
                font-size: 12px;
                color: #fff;
            }

            .warning {
                color: #e74032;
                font-size: 14px;
            }
        }
    }
}
</style>
